<template>
	<!-- 续费弹窗 -->
	<view v-if="allShowVIPnow" class="vipbox">
		<view class="vip_main">
			<view class="vip_del" @click="closeAlert()">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719917012240382.png"
					mode="aspectFill"></image>
			</view>
			<view class="vip_tit">
				{{vipInfo.Title}}
			</view>
			<view class="vip_lit">
				<!-- 将失去以下特权 -->
				{{vipInfo.Msg}}
			</view>
			<view class="vip_icon">
				<view class="icon_cell" v-for="(item, i) in vipIcon" :key="i">
					<image :src="item.icon" mode="aspectFill"></image>
					<view class="tit">
						{{ item.tit }}
					</view>
				</view>
			</view>

			<view class="vip_time">
				距限时优惠结束还剩<text>{{ timeOut.minutes }}</text>分<text>{{ timeOut.second }}</text>秒
			</view>

			<view class="vip_btn">
				<view class="btnBox">
					<view class="priceText">
						￥{{ vipInfo.Renew_MemberValue}}
					</view>
					<view class="priceText2" v-if="vipInfo.Discount<1">
						￥{{ vipInfo.YJ_Renew_MemberValue }}
					</view>
					<view class="btn_cell btn_moon" @click="vipPay(vipInfo.Renew_MemberValue)">
						{{ vipInfo.ButtonText }}<text v-if="vipInfo.Discount<1">(<text class="redNum"> {{ vipInfo.Discount*10 }}折</text>)</text>
					</view>
				</view>
				<view class="btnBox">
					<view class="priceText">
						￥{{ vipInfo.Year_MemberValue }}
					</view>
					<view class="priceText2" v-if="vipInfo.Discount<1">
						￥{{ vipInfo.YJ_Year_MemberValue }}
					</view>
					<view class="btn_cell btn_year" @click="vipPay(vipInfo.Year_MemberValue)">
						{{ vipInfo.Year_ButtonText }}<text v-if="vipInfo.Discount<1">(<text class="redNum"> {{ vipInfo.Discount*10 }}折</text>)</text>
					</view>
				</view>


			</view>
			<!-- <view class="vip_close" @click="vipCloseFun">
					不再提示
				</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "VipAlert",
		data() {
			return {
				allShowVIPnow: false,
				vipInfo: {},
				timeOut: {
					minutes: 0,
					second: 0
				},
				timeAll: 30 * 60 * 1000,
				timeFun: null,
				vipIcon: [{
						tit: '加好友',
						icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719916014874358.png'
					},
					{
						tit: '加微信',
						icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719916047154770.png'
					},
					{
						tit: '系统推荐',
						icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719916073124229.png'
					}
				],
			};
		},
		props: {},

		methods: {

			closeAlert() {
				this.allShowVIPnow = false
				if (this.timeFun) {
					clearInterval(this.timeFun)
					this.timeFun = null
				}
			},
			async IsExpiredUser() {
				let res = await this.$api.post('/User/IsExpiredUser')
				this.vipInfo = res.data
				let IsNotice = res.data?.IsNotice || false
				if (IsNotice) {
					this.allShowVIPnow = true
					this.timeFun = setInterval(() => {
						let time = this.timeAll
						this.countdownVip(time)
					}, 1000);
				}

			},
			// 倒计时接收一个时间戳
			countdownVip(e) {
				let time = new Date(e)
				let minutes = time.getMinutes()
				let second = time.getSeconds()
				this.timeAll = this.timeAll - 1000
				this.timeOut = {
					minutes,
					second
				}
			},
			async vipPay(free) {
				let pres = await this.$api.post('/Payment/PayV2', {
					CompanyID: 6003,
					total_fee: free,
					EventType: '会员升级',
					body: this.vipInfo.UserType,
					SourcePage: 'member_tips_ad',
					// #ifdef MP-WEIXIN
					PayChannel: 'weixin',
					// #endif
					// #ifdef APP
					PayChannel: 'app'
					// #endif
				});

				let _this = this;
				let payObj = JSON.parse(pres.data);

				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async function(res) {
						_this.$pv.msg('支付成功');
						setTimeout(() => {
							_this.closeAlert()
							// _this.upDateInfo();
						}, 500);

						// _this.nav_back(2000);
					},
					fail: function(err) {
						console.log(err);
						_this.$pv.msg('支付失败');
					}
				});
			},
		},
		async mounted() {
			await this.IsExpiredUser()
		},
	}
</script>

<style lang="scss" scoped>
	.vipbox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 101;
		display: flex;
		align-items: center;
		justify-content: center;

		.vip_main {
			width: 600rpx;
			// height: 616rpx;
			box-sizing: border-box;
			padding: 36rpx 32rpx;
			background: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719915806451216.png') no-repeat;
			background-size: cover;
			position: relative;

			// margin: 0 auto;
			.vip_del {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.vip_tit {
				font-weight: bold;
				font-size: 42rpx;
				color: #3D210A;
				text-align: center;
			}

			.vip_lit {
				margin-top: 14rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #987045;
				text-align: center;
			}

			.vip_icon {
				margin: 40rpx 0;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icon_cell {
					display: flex;
					align-items: center;
					flex-direction: column;

					image {
						width: 96rpx;
						height: 96rpx;
						margin-bottom: 12rpx;
					}

					.tit {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}

			.vip_time {
				text-align: center;
				margin: 40rpx 0;
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;

				text {
					font-size: 24rpx;
					color: #E21F15;
				}
			}

			.vip_btn {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btnBox {
					.priceText {
						color: #64441D;
						text-align: center;
						font-weight: bold;
						font-size: 36rpx;
					}
					.priceText2{
						font-size: 24rpx;
						color: #64441D;
						text-align: center;
						// margin-right: 5rpx;
						text-decoration: #000 line-through;
					}
				}

				.btn_cell {
					width: 260rpx;
					height: 80rpx;
					box-sizing: border-box;
					border-radius: 50rpx;
					font-weight: bold;
					font-size: 36rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn_moon {
					border: 2rpx solid #64441D;
					color: #64441D;

					>text {
						color: #64441D;
					}
				}

				.btn_year {
					background: linear-gradient(90deg, #432813 0%, #27221F 100%);
					color: #F7E0B2;

					>text {
						color: #F7E0B2;
					}
				}
				.redNum{
					color: #E21F15;
				}
			}

			.vip_close {
				margin-top: 14rpx;
				text-align: center;
				font-size: 24rpx;
				color: #9F958E;
				padding: 10rpx 24rpx;
			}
		}
	}
</style>